<template>
  <div class="study-home">
    <!-- 页面头部 -->
    <div class="header">
      <div class="header-content">
        <h1 class="title">计算机考研学习系统</h1>
        <p class="subtitle">系统化学习 · 高效备考 · 精准提升</p>
        <div class="header-decoration">
          <div class="decoration-circle circle-1"></div>
          <div class="decoration-circle circle-2"></div>
          <div class="decoration-circle circle-3"></div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 四门课程选择 -->
      <div class="courses-section">
        <h2 class="section-title">
          <span class="title-decoration"></span>
          我的核心课程
        </h2>
        <div class="courses-grid">
          <div 
            v-for="course in courses" 
            :key="course.id"
            class="course-card"
            @mouseenter="startCardHover(course.id)"
            @mouseleave="stopCardHover(course.id)"
          >
            <div class="course-icon">
              <i :class="course.icon"></i>
              <div class="icon-halo"></div>
            </div>
            <h3 class="course-name">{{ course.name }}</h3>
            <p class="course-desc">{{ course.description }}</p>
            <div class="course-progress">
              <el-progress 
                :percentage="course.studyProgress" 
                :text-inside="true"
                :stroke-width="20"
                :color="'#4f9bff'"
                :status="getProgressStatus(course.studyProgress)"
                class="course-progress-bar study-bar"
                style="margin-bottom: 10px;"
                :format="percent => `学习进度 ${percent}%`"
              />
              <el-progress 
                :percentage="course.practiceProgress" 
                :text-inside="true"
                :stroke-width="20"
                :color="'#67C23A'"
                :status="getProgressStatus(course.practiceProgress)"
                class="course-progress-bar practice-bar"
                :format="percent => `练习进度 ${percent}%`"
              />
            </div>
            <div class="course-actions">
              <el-button 
                size="mini" 
                type="primary" 
                @click.stop="goLearn(course.id)"
                class="action-btn enhanced-btn"
              >
                <span class="btn-icon"></span>
                去学习
              </el-button>
              <el-button 
                size="mini" 
                @click.stop="goPractice(course.id)"
                class="action-btn enhanced-btn"
              >
                <span class="btn-icon"></span>
                去练习
              </el-button>
            </div>
            <div class="course-hover-effect" :class="{'active': activeHoverCard === course.id}"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { useUserStore } from '../../../store/UserStore'

axios.defaults.baseURL = 'http://localhost:8080'

export default {
  name: 'StudyHome',
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    const userId = userStore.userInfo?.userId || 0
    const activeHoverCard = ref(null)
    const activeHoverStat = ref(null)

    const courses = reactive([
      {
        id: 1,
        name: '数据结构',
        description: '线性表、栈、队列、树、图等核心数据结构',
        icon: 'el-icon-connection',
        studyProgress: 0, // 新增 学习进度
        practiceProgress: 0 // 新增 练习进度
      },
      {
        id: 2,
        name: '操作系统',
        description: '进程管理、内存管理、文件系统等',
        icon: 'el-icon-monitor',
        studyProgress: 0,
        practiceProgress: 0
      },
      {
        id: 3,
        name: '计算机组成原理',
        description: '计算机硬件系统的组成和工作原理',
        icon: 'el-icon-cpu',
        studyProgress: 0,
        practiceProgress: 0
      },
      {
        id: 4,
        name: '计算机网络',
        description: '网络协议、网络安全、网络编程',
        icon: 'el-icon-share',
        studyProgress: 0,
        practiceProgress: 0
      }
    ])

    const goLearn = (courseId) => {
      router.push({ name: 'Learn408', query: { courseId } })
    }
    
    const goPractice = (courseId) => {
      router.push({ name: 'KnowledgePointSelection', query: { courseId } })
    }
    
    const loadProgress = async () => {
      for (const course of courses) {
        try {
          // 学习进度
          const studyRes = await axios.get('/userProgress/course-progress', {
            params: { userId, courseId: course.id }
          })
          course.studyProgress = Math.round(studyRes.data.progress || 0)
        } catch (e) {
          course.studyProgress = 0
        }
        try {
          // 练习进度
          const practiceRes = await axios.get('/userPractices/point-progress', {
            params: { userId, courseId: course.id }
          })
          if (Object.prototype.hasOwnProperty.call(practiceRes.data, 'progress')) {
            course.practiceProgress = Math.round(practiceRes.data.progress)
          } else {
            const { practicedCount, totalCount } = practiceRes.data
            course.practiceProgress = totalCount
              ? Math.round((practicedCount / totalCount) * 100)
              : 0
          }
        } catch (e) {
          course.practiceProgress = 0
        }
      }
    }
    
    const getProgressStatus = (progress) => {
      if (progress >= 80) return 'success'
      if (progress >= 50) return 'warning'
      return 'exception'
    }
    
    const startCardHover = (id) => {
      activeHoverCard.value = id
    }
    
    const stopCardHover = (id) => {
      activeHoverCard.value = null
    }
    
    const startStatHover = (label) => {
      activeHoverStat.value = label
    }
    
    const stopStatHover = (label) => {
      activeHoverStat.value = null
    }

    onMounted(loadProgress)
    
    return {
      courses,
      activeHoverCard,
      activeHoverStat,
      goLearn,
      goPractice,
      getProgressStatus,
      startCardHover,
      stopCardHover,
      startStatHover,
      stopStatHover
    }
  }
}
</script>

<style scoped>
*:focus {
  outline: none;
}

::v-deep(.course-progress-bar .el-progress__text) {
  color: #000000 !important;
}
.study-home {
  min-height: 100vh;
  background-color: #f8fafc;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 增强头部设计 */
.header {
  background: linear-gradient(135deg, #96cbf9 0%, #397cdb 100%);
  padding: 30px 0;
  text-align: center;
  color: white;
  box-shadow: 0 4px 15px rgba(79, 155, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.15) 0%, transparent 30%);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.title {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 1px;
  color: white;
  position: relative;
  display: inline-block;
}

.title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
}

.subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  display: inline-block;
}

.subtitle::before,
.subtitle::after {
  content: '·';
  margin: 0 8px;
  color: rgba(255,255,255,0.7);
}

/* 头部装饰元素 */
.header-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}

.circle-1 {
  width: 120px;
  height: 120px;
  top: -30px;
  right: -30px;
}

.circle-2 {
  width: 80px;
  height: 80px;
  bottom: -20px;
  left: 10%;
}

.circle-3 {
  width: 60px;
  height: 60px;
  bottom: 30%;
  right: 15%;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 增强章节标题 */
.section-title {
  font-size: 1.5rem;
  color: #3a7bd5;
  margin-bottom: 24px;
  font-weight: 600;
  position: relative;
  padding-left: 25px;
  display: flex;
  align-items: center;
}

.title-decoration {
  position: absolute;
  left: 0;
  width: 18px;
  height: 18px;
  background-color: #4f9bff;
  border-radius: 4px;
  margin-right: 12px;
  display: inline-block;
}

.title-decoration::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.courses-section {
  margin-bottom: 50px;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* 增强课程卡片 */
.course-card {
  background: white;
  border-radius: 18px;
  padding: 48px 36px 40px 36px;
  box-shadow: 0 10px 28px rgba(79, 155, 255, 0.13);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1.5px solid rgba(79, 155, 255, 0.18);
  position: relative;
  overflow: hidden;
  z-index: 1;
  min-height: 340px;
  max-width: 520px;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(79, 155, 255, 0.15);
  border-color: rgba(79, 155, 255, 0.3);
}

/* 卡片悬停效果 */
.course-hover-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(79, 155, 255, 0.05) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.course-hover-effect.active {
  opacity: 1;
}

/* 增强课程图标 */
.course-icon {
  font-size: 2.5rem;
  color: #4f9bff;
  margin-bottom: 16px;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

.icon-halo {
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background: rgba(79, 155, 255, 0.1);
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.course-card:hover .icon-halo {
  opacity: 1;
  transform: scale(1.1);
}

.course-name {
  font-size: 1.7rem;
  color: #2d3748;
  margin-bottom: 16px;
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.course-name::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 40px;
  height: 2px;
  background: #4f9bff;
  transition: width 0.3s ease;
}

.course-card:hover .course-name::after {
  width: 60px;
}

.course-desc {
  color: #718096;
  margin-bottom: 28px;
  line-height: 1.7;
  font-size: 1.13rem;
}

.course-progress {
  margin-top: 28px;
  margin-bottom: 18px;
}

.course-progress-bar {
  width: 100%;
  min-width: 180px;
  height: 48px; /* 再加厚 */
  border-radius: 16px;
  font-size: 13px !important; /* 字体调小 */
  line-height: 48px !important;
  color:#2d3748;
}

.el-progress-bar__innerText {
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 0 12px !important;
  white-space: nowrap;
}

/* 增强按钮 */
.course-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.action-btn {
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
  border-radius: 6px !important;
}

.enhanced-btn {
  padding: 8px 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 100%);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.action-btn:hover::before {
  transform: translateX(0);
}

.btn-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
}

.action-btn.el-button--primary .btn-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 3L1 9l11 6 9-4.91V17h2V9M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82z"/></svg>') no-repeat center;
  transform: translate(-50%, -50%);
}

.action-btn:not(.el-button--primary) .btn-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234f9bff"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>') no-repeat center;
  transform: translate(-50%, -50%);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .title {
    font-size: 2rem;
  }
  
  .courses-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>